<template>
  <el-container class="default-container">
    <el-header class="default-header">
      <h1 class="brand">代驾后台管理系统</h1>
      <div class="user">
        <div class="user-item user-name">
          <span class="item-title">角色：</span>
          <span class="item-value">{{ gradeText }}</span>
        </div>
        <div class="user-item login-time">
          <span class="item-title">登录时间：</span>
          <span class="item-value">{{ loginTime }}</span>
        </div>
        <div class="user-item logout">
          <el-button
              type="text"
              size="mini"
              @click="logout"
          >
            退出
            <i class="el-icon-arrow-down"></i>
          </el-button>
        </div>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <div class="menu-container">
          <el-menu
              :router="true"
              :unique-opened="true"
              :default-active="activeNav"
              :default-openeds="activeSubNav"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
          >
            <template v-for="nav in navs">
              <template v-if="nav.children && nav.children.length !== 0">
                <!-- eslint-disable-next-line -->
                <el-submenu :index="nav.index">
                  <template slot="title">
                    <i :class="nav.icon"></i>
                    <span slot="title">{{ nav.title }}</span>
                  </template>
                  <!-- eslint-disable-next-line -->
                  <el-menu-item
                      v-for="menuItem in nav.children"
                      :key="menuItem.index"
                      :index="menuItem.index">
                    {{ menuItem.title }}
                  </el-menu-item>
                </el-submenu>
              </template>
              <!-- eslint-disable-next-line -->
              <el-menu-item
                  v-else
                  :index="nav.index">
                <i :class="nav.icon"></i>
                <span slot="title">{{ nav.title }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </div>
      </el-aside>
      <el-main>
        <section class="default-main">
          <h2 class="default-main-title">{{ title }}</h2>
          <router-view/>
        </section>
        <!--        <el-footer>Powered By tonglingok</el-footer>-->
      </el-main>
    </el-container>

  </el-container>
</template>

<script>
/**
 * @Author: lifuzhao
 * @Date: 2019-07-11
 * @Project: driver
 */
import './default.less'
import {navConfig} from '../constant'
import {mapState, mapGetters} from 'vuex'

export default {
  name: "default"
  , data() {
    return {
      title: ''
      , activeNav: ''
      , activeSubNav: []
    }
  }
  , computed: {
    ...mapState([
      'user'
      , 'loginTime'
    ])
    , ...mapGetters({
      gradeOrigin: 'gradeOrigin'
      , gradeText: 'gradeText'
    })
    , navs() {
      let gradeOrigin = this.gradeOrigin
      return navConfig.filter(nav => {
        if (nav.hasOwnProperty('auth')) {
          return nav.auth.includes(gradeOrigin)
        }
        return true
      }).map(item => {
        const newItem = {...item}
        if (newItem.children) {
          newItem.children = newItem.children.filter(child => {
            if (child.hasOwnProperty('auth')) {
              return child.auth.includes(gradeOrigin)
            }
            return true
          })
        }
        return newItem
      })
    }
  }
  , watch: {
    $route: {
      deep: true,
      immediate: true
      , handler() {
        this.handleRouteChange()
      }
    }
  }
  , methods: {
    handleRouteChange() {
      let {path, meta: {title}} = this.$route
      this.title = title
      let pathArr = path.split('/')
      if (pathArr.length > 2) {
        this.activeSubNav = ['/' + pathArr[1]]
      }
      this.activeNav = path
    }
    , logout() {
      this
          .$confirm('确认退出？', '退出登录')
          .then(() => {
            this.$axios
                .get('/api/v1/token/login/out')
                .finally(() => {
                  this.$store.commit('setToken', null)
                  this.$router.push({
                    path: '/login'
                  })
                })
          })
    }
  }
}
</script>
